<template>
  <div class="doc-rich-editor-main">
    <header class="doc-editor-header">
      <div class="left">
        <div class="ic"></div>
        <p class="name">{{ fileName }}</p>
        <p class="updata-time">
          <i class="iconfont iconwangpan-lishijilu1x" />最近保存 {{ docRichEditorFile?.updated_at }}
        </p>
      </div>
      <div class="right">
        <el-button @click.stop="handleBack">返回</el-button>
        <el-button color="#6C52EA" @click.stop="handleSave">保存</el-button>
      </div>
    </header>
    <body class="rich-text-warp">
      <Editor
        apiKey="eh95ehour1g4mo89kphlx5stsjefy07d4njru1a0lmtf0qa1"
        :init="setting"
        v-model="formData.content"
      ></Editor>
    </body>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import Router from '@/router'
import Editor from '@tinymce/tinymce-vue'
import { setting } from '@/utils/setting'
import { useRouter } from 'vue-router'
import { IfileListData } from '@/views/documentCenter/config/fileListData'

import { store } from '@/store/doc-center'
import { storeToRefs } from 'pinia'
import { editDocData } from '@/apis/system/document'

const docStore = store()
const { docRichEditorFile } = storeToRefs(docStore)

const fileId = ref<number>()
const fileName = ref<string>()
const $router = useRouter()
fileId.value = +$router.currentRoute.value.query.id!
fileName.value = $router.currentRoute.value.query.fileName as string

onMounted(() => {
  if (docRichEditorFile.value?.content) {
    formData.value.content = docRichEditorFile.value.content
  }
})
/**
 * @desc: 返回
 */
const handleBack = () => {
  docRichEditorFile.value = {} as IfileListData
  Router.back()
}

/**
 * @desc: 保存
 */
const formData = ref({
  _id: 0,
  content: ''
})
const handleSave = () => {
  formData.value._id = +fileId.value!
  editDocData(formData.value)
    .then((res) => {
      if (!res) return
      docRichEditorFile.value = res.data
      ElMessage({
        type: 'success',
        message: '保存成功'
      })
    })
    .catch((res) => {
      ElMessage('服务器内部错误')
    })
}
</script>

<style lang="less" scoped>
.doc-rich-editor-main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  .doc-editor-header {
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    .left {
      display: flex;
      align-items: center;
      .ic {
        height: 26px;
        width: 6px;
        box-sizing: border-box;
        background: #409eff;
        border-radius: 3px;
        margin-right: 16px;
      }
      .name {
        font-size: 1.3em;
        font-weight: 600;
      }
      .updata-time {
        margin-left: 24px;
        color: #999;
      }
    }
    .right {
      display: flex;
      align-items: center;
    }
  }
  .rich-text-warp {
    width: 100%;
    padding: 16px;
  }
}
</style>
